import React, { Component, Suspense } from 'react';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import { routerRedux } from 'dva/router';
import { connect } from 'dva';
import { Row, Form, Spin, Pagination, Button, Select, DatePicker, Table, Drawer } from 'antd';
import styles from './index.less';
import { FormattedMessage } from 'umi-plugin-react/locale';
import SelectDialog from './robotSelect'
import moment from 'moment';
import download from '@/utils/download';
const FormItem = Form.Item;
const { RangePicker } = DatePicker
//不需要时间
const hideDate = ['dialogueAnalysisColumn'];
//不需要分页
const hidePage = ['knowledgeAnalysisColumn'];

const showExport = ['mulDialogueAnalysisColumn', 'questionAnalysisColumn'];

class TempIndex extends Component {
    state = {
        isSearch: false,
        visible: false,
        from: moment(moment().subtract(1, 'days').format('YYYY-MM-DD 00:00')).unix(),
        to: moment(moment().format('YYYY-MM-DD 23:59')).unix(),
        dataList: [],
        robotIds: [],
        pageSize: 10,
        current: 1,
        total: 0,
    };

    componentDidMount() {
        const { currentUser: { robotId } } = this.props;
        this.setState({
            robotIds: [robotId]
        })
    }
    handelSearch = () => {
        const { dispatch } = this.props;
        let param = this.getParam(true);
        this.setState({isSearch:true})
        this.reqRef = requestAnimationFrame(() => {
            dispatch({
                type: 'sameOperateAnalysis/getTableData',
                payload: param,
                callback: res => {
                    this.setState({
                        dataList: res.list,
                        total: res.total,
                        isSearch: false,
                    })
                }
            })
        })
    }
    getParam = (search) =>{
        const { currentUser: { robotId, uid }, type } = this.props;
        let { from, to, pageSize, current, robotIds } = this.state;
        from = from * 1000;
        to = to * 1000;
        let param = {
            robotIds,
            userId: uid,
            type: type,
        }
        if (hideDate.indexOf(type) == -1) {
            Object.assign(param, { from, to })
        }
        if (hidePage.indexOf(type) == -1 && search) {
            Object.assign(param, {
                limit: pageSize,
                page: current,
            })
        }
        return param;
    }
    handelDownload = () => {
        const { dispatch } = this.props;
        let param = this.getParam(false);
        this.reqRef = requestAnimationFrame(() => {
            dispatch({
                type: 'sameOperateAnalysis/downloadExcel',
                payload: param,
                callback: res => {
                    let filename = decodeURIComponent(res.requestRes.headers.get('Content-Disposition').split('=')[1]);
                    download.byBlob(res.fileBlob, filename)
                }
            })
        })
    }
    handelSelect = (val) => {
        let to = moment(moment().format('YYYY-MM-DD 23:59')).unix()
        let from = null;
        if (val == 1) {
            from = moment(moment().subtract(1, 'days').format('YYYY-MM-DD 00:00')).unix();
        } else if (val == 2) {
            from = moment(moment().subtract(1, 'weeks').format('YYYY-MM-DD 00:00')).unix();
        } else if (val == 3) {
            from = moment(moment().subtract(1, 'months')).unix();
        }
        this.setState({ from, to })
    }
    handelPicker = (val, str) => {
        let from = moment(val[0].format('YYYY-MM-DD 00:00')).unix();
        let to = moment(val[1].format('YYYY-MM-DD 23:59')).unix();
        this.setState({ from, to });
    }
    openDialog = () => {
        this.setState({ visible: true });
    }
    handleCancel = () => {
        this.setState({ visible: false });
    };
    changePage = (current) => {
        this.setState({ current }, () => {
            this.handelSearch();
        })
    }
    changeShowSize = (current, pageSize) => {
        this.setState({ current, pageSize }, () => {
            this.handelSearch();
        })
    }
    getRowSelect = (list) => {
        let robotIds = [];
        list.map(item => {
            robotIds.push(item.id)
        })
        this.setState({ robotIds })
    }
    onConfire = () => {
        this.setState({ visible: false });
    }
    render() {
        const { page, current, pageSize, total, dataList } = this.state
        const { tableColumn, title, type } = this.props
        return (
            <div className={styles.dabj}>
                <Spin spinning={this.state.isSearch}>
                    <Row>
                        <p style={{ marginLeft: 20, marginTop: 10 }} className="titleA">
                            {title}
                        </p>
                    </Row>
                    <Row style={{ textAlign: 'right' }}>
                        <Button size='small' onClick={this.openDialog} style={{ marginRight: 10 }}>筛选机器人</Button>
                        {hideDate.indexOf(type) == -1 ? <Select defaultValue={1} onChange={this.handelSelect} size='small' style={{ width: 80, marginRight: 10 }}>
                            <Select.Option value={1}>今天</Select.Option>
                            <Select.Option value={2}>近7天</Select.Option>
                            <Select.Option value={3}>近一月</Select.Option>
                        </Select> : null}
                        {hideDate.indexOf(type) == -1 ? <RangePicker size='small' onChange={this.handelPicker} style={{ marginRight: 10, width: 260 }}>
                        </RangePicker> : null}
                        <Button icon='search' size='small' onClick={this.handelSearch} style={{ marginRight: 10 }}>查询</Button>
                        {showExport.indexOf(type) != -1 ? <Button
                            icon='download'
                            size='small'
                            onClick={this.handelDownload}
                            style={{ marginRight: 10 }}
                        >导出</Button> : null}
                    </Row>
                    <Row style={{ marginTop: 20 }}>
                        <Table
                            columns={tableColumn}
                            dataSource={dataList}
                            pagination={false}
                        ></Table>
                    </Row>
                    {hidePage.indexOf(type) == -1 ? <Row>
                        <Pagination
                            showSizeChanger
                            style={{ textAlign: 'center', marginTop: 20 }}
                            total={total}
                            pageSize={pageSize}
                            current={current}
                            onChange={this.changePage}
                            onShowSizeChange={this.changeShowSize}
                            showTotal={() => `共 ${this.state.total} 条`}
                        ></Pagination>
                    </Row> : null}
                </Spin>

                <SelectDialog
                    wrappedComponentRef={this.saveFormRef}
                    visible={this.state.visible}
                    getRowSelect={this.getRowSelect}
                    onCancel={this.handleCancel}
                    onConfire={this.onConfire}
                />
            </div>
        );
    }
}

export default connect(({ user }) => ({
    currentUser: user.currentUser,
}))(Form.create()(TempIndex));
